<template>
  <div style="background-color:#F7F7F7;height:100%">
    <van-nav-bar title="秒杀专区" @click-left="()=>$router.push('/main')" left-arrow>
      <template #left>
        <van-icon name="arrow-left" color="black" size="1rem"/>
      </template>
    </van-nav-bar>

    <ul class="header">
      <li
        v-for="(val,inx) in activityList"
        :key="inx"
        :class="inx===activeInx?'active':''"
        @click="tabSwitch(inx)"
      >
        <span class="title">{{val.title}}</span>
        <span class="status">{{val.status}}</span>
      </li>
    </ul>
    <div class="noGoods" v-if="goodsList.length<1">
      <img src="https://uniapp.b2b2c.niuteam.cn/upload/uniapp/common-empty.png" alt />
      <div class="noText">暂时没找到相关数据哦</div>
      <button class="goBtn">去逛逛</button>
    </div>
    <ul class="goodsList">
      <li v-for="(val,inx) in goodsList" :key="inx" @click="toGoodsDetail">
        <div class="goodsBox">
          <img :src="val.logo" alt class="goodsLogo" />
          <div class="goodsDescribe">
            <div class="goodsTitle">{{val.title}}</div>
            <del class="goodsPrice">¥{{val.goods_price}}</del>
            <div class="rushPrice">秒杀价:¥{{val.rush_price}}</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { NavBar, Icon } from "vant";
export default {
  components: {
    "van-nav-bar": NavBar,
    "van-icon": Icon
  },
  methods: {
    toGoodsDetail() {
      this.$router.push("/activity/sec-kill/detail");
    },
    tabSwitch(inx) {
      this.activeInx = inx;
      inx === 1 ? (this.goodsList = []) : (this.goodsList = this.goodsListBak);
    }
  },
  demo: [1, 2, 3],
  data() {
    return {
      activeInx: 1,
      activityList: [
        {
          title: "早场秒杀",
          status: "已结束"
        },
        {
          title: "中场秒杀",
          status: "未开始"
        },
        {
          title: "晚场秒杀",
          status: "抢购中"
        },
        {
          title: "夜场秒杀",
          status: "未开始"
        }
      ],
      goodsList: [],
      goodsListBak: [
        {
          title: "向日葵花束生日配送鲜花速递 淡雅脱俗",
          goods_price: "50.00",
          rush_price: "45.00",
          logo:
            "https://uniapp.b2b2c.niuteam.cn/upload/9/common/images/20200420/20200420115613158735497306210_mid.jpg"
        },
        {
          title: "向日葵花束生日配送鲜花速递 蓝色梦幻",
          goods_price: "50.00",
          rush_price: "45.00",
          logo:
            "https://uniapp.b2b2c.niuteam.cn/upload/9/common/images/20200420/20200420115612158735497285781_mid.jpg"
        },
        {
          title: "2020年夏新款粉色网纱草莓亮片荷叶边系带短袖V领度假长裙 ",
          goods_price: "350.00",
          rush_price: "300.00",
          logo:
            "https://uniapp.b2b2c.niuteam.cn/upload/9/common/images/20200420/20200420102738158734965884973_mid.jpg"
        }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  overflow-x: auto;
  background-color: white;
  li {
    box-sizing: border-box;
    padding: 0.2rem;
    flex: 0 0 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      font-weight: bold;
      font-size: 0.8rem;
    }
    .status {
      font-size: 0.7rem;
    }
  }
  .active {
    background-color: #ff335c;
    color: white;
  }
}
.noGoods {
  margin-top: 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  .noText {
    margin-top: 0.5rem;
    color: #898989;
    font-size: 0.8rem;
  }
  .goBtn {
    margin-top: 0.5rem;
    background-color: #ff335c;
    border-radius: 1rem;
    padding: 0.5rem 2.5rem;
    border: none;
    color: white;
    font-size: 0.8rem;
    outline: none;
  }
}
.goodsList {
  display: flex;
  flex-wrap: wrap;
  li {
    box-sizing: border-box;
    width: 50%;
    padding: 0.2rem;
    .goodsBox {
      background-color: white;
      border-radius: 0.5rem;
      padding-bottom: 0.2rem;
      .goodsLogo {
        width: 100%;
        border-radius: 0.5rem 0.5rem 0 0;
      }
      .goodsDescribe {
        padding: 0.2rem;
        .goodsTitle {
          font-size: 0.8rem;
        }
        .goodsPrice {
          color: #ccc;
          font-size: 0.75rem;
        }
        .rushPrice {
          font-size: 0.8rem;
          color: #ff335c;
        }
      }
    }
  }
}
</style>